/*
 * @Description:
 * @Autor: fage
 * @Date: 2022-07-07 14:36:09
 * @LastEditors: chenbinfa
 * @LastEditTime: 2022-08-18 17:39:21
 */
import styled from "styled-components";
import React, { useRef, useState, useEffect } from "react";
import { DatePicker, Input, Modal, Button, Dropdown, Descriptions, Select, Space, Table, message, Tabs, Popconfirm, Checkbox, Card, Form } from "antd";
import { UserOutlined, DownOutlined, DeleteOutlined } from "@ant-design/icons";
import _ from "lodash";
import { formatterCurrency, formatBalanceStr, formatterSize, formatterSizeFromMB } from "@utils/formatter";
import { ThTable } from "@/components/ThTable";
import moment from "moment";
import { userList } from "../../services/graphql";

const Main = () => {
	const [loading, setLoading] = useState(false);
	const loadData = async params => {
		setLoading(true);
		if (!params.filter || params.filter.length == 0) {
			params.filter = "{}";
		} else {
			let v = params.filter[0].values[0];
			let k = v.includes("@") ? "email" : "address";
			params.filter = `{${k}:"${v}"}`;
		}
		let ret = await userList(params);
		setLoading(false);
		if(ret.msg=='ok'&&ret.data){
			ret.data.forEach(t=>t.creationTime=moment(t.creationTime).format('YYYY-MM-DD HH:mm'));
		}
		return ret;
	};
	const props = {
		border: true,
		size: "middle",
		pagesize: 20,
		titleBar: {
			title: "Users",
			submitBtnText: "Search",
			filter: [
				{
					label: "Search",
					cloumn: "keyword",
					type: "search",
					props: {
						placeholder: "Search by email / Address",
						style: { width: 300 },
						allowClear:true
					}
				}
			]
		},
		loadList: {
			method: loadData
		},
		table: {
			columns: [
				{
					title: "No.",
					dataIndex: "id",
					key: "id",
					width: "60px"
				},
				{
					title: "Creation time",
					dataIndex: "creationTime",
					key: "creationTime",
					width: "160px"
				},
				{
					title: "Email",
					dataIndex: "email",
					key: "email",
					textWrap: "word-break",
					ellipsis: true
				},
				{
					title: "Address",
					dataIndex: "address",
					key: "address",
					textWrap: "word-break",
					ellipsis: true,
					width: "40%"
				},
				{
					title: "Account type",
					dataIndex: "accountTypeStr",
					key: "accountTypeStr",
					textWrap: "word-break",
					ellipsis: true
				},
				{
					title: "Discount",
					dataIndex: "discount",
					key: "discount",
					textWrap: "word-break",
					ellipsis: true
				},
				{
					title: "Invited users",
					dataIndex: "totalInvited",
					key: "totalInvited",
					textWrap: "word-break",
					ellipsis: true
				},
				{
					title: "Storage",
					dataIndex: "storageSize",
					key: "storageSize",
					textWrap: "word-break",
					ellipsis: true
				}
			]
		}
	};

	return <ThTable props={props} />;
};
export default styled(Main)``;
